<template>
  <div class="electro-charts">
    <div
      ref="recentElectricity"
      class="charts"
      style="width: 100%; height: 90%; padding-top: 5px"
    ></div>
  </div>
</template>
<script>
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import * as echarts from "echarts";
import api from "../../api/api";
var recentElectricityOption = {
  title: {
    text: "",
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      label: {
        backgroundColor: "#6a7985",
      },
    },
  },
  //   legend: {
  //     data: ["Email", "Union Ads"],
  //     left: "right",
  //     right: 10,
  //     textStyle: {
  //       fontSize: 10, //字体大小
  //       color: "#ffffff", //字体颜色
  //     },
  //   },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "5%",
    top: "5%",
    containLabel: true,
  },
  xAxis: [
    {
      type: "category",
      boundaryGap: false,
      data: [],
      axisLabel: {
        show: true,
        textStyle: {
          color: "#ffffff",
        },
      },
      splitLine: { show: false },
    },
  ],
  yAxis: [
    {
      type: "value",
      splitLine: { show: false },
      axisLabel: {
        show: true,
        textStyle: {
          color: "#ffffff",
        },
      },
    },
  ],
  legend: {
    data: ["今日最高：1757.1kw", "昨日最高：1657.2kw"],
    left: "right",
    right: 10,
    textStyle: {
      fontSize: 11, //字体大小
      color: "#ffffff", //字体颜色
    },
  },
  series: [
    {
      name: "",
      type: "line",
      areaStyle: {},
      showSymbol: true, //是否默认展示圆点
      symbol: "circle", //设定为实心点
      symbolSize: 1, //设定实心点的大小
      // emphasis: {
      //   focus: "series",
      // },
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            1,
            0,
            0,
            [
              {
                offset: 0,
                color: "#8b8b8b26", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#00BEF0",
              },
            ],
            false
          ),
        },
      },
      data: [120, 132, 101, 134, 90, 230, 210],
    },
    {
      name: "",
      type: "line",
      areaStyle: {},
      showSymbol: true, //是否默认展示圆点
      symbol: "circle", //设定为实心点
      symbolSize: 1, //设定实心点的大小
      // emphasis: {
      //   focus: "series",
      // },
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            1,
            0,
            0,
            [
              {
                offset: 0,
                color: "#8b8b8b26", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#49CE7A",
              },
            ],
            false
          ),
        },
      },
      data: [220, 182, 191, 234, 290, 330, 310],
    },
  ],
};
export default {
  setup(props, conts) {
    const recentElectricity = ref(null);
    const getelectro = () => {
      // electroList.value = [];
      let barRecentE = echarts.init(recentElectricity.value);
      const setIntervalTime = ref(null);
      api
        .postFormAPI("backup/electricityDataInfo/initHomePower", {
          devId: "84167",
          dateType: "month",
        })
        .then((res) => {
          if (res.data.code == 1) {
            let electrodata = res.data.data;
            let xAxisdata = [];

            for (
              var i = 0;
              i < electrodata.lastMonthPowerDataList.length;
              i++
            ) {
              if (
                electrodata.lastMonthPowerDataList[i] &&
                electrodata.lastMonthPowerDataList[i].time
              ) {
                xAxisdata.push(electrodata.lastMonthPowerDataList[i].time);
              }
            }
            recentElectricityOption.legend.data[0] =
              "当月总和：" + electrodata.totalCurMonthPowerData + "kw";
            recentElectricityOption.legend.data[1] =
              "上个月总和：" + electrodata.totalLastMonthPowerData + "kw";
            recentElectricityOption.series[0].name =
              "当月总和：" + electrodata.totalCurMonthPowerData + "kw";
            recentElectricityOption.series[1].name =
              "上个月总和：" + electrodata.totalLastMonthPowerData + "kw";
            recentElectricityOption.series[0].data =
              electrodata.curMonthPowerDataList;
            recentElectricityOption.series[1].data =
              electrodata.lastMonthPowerDataList;
            recentElectricityOption.xAxis[0].data = xAxisdata;
            let index = 0;
            barRecentE.currentIndex = -1;
            setInterval(function () {
              var dataLen = recentElectricityOption.series[0].data.length;
              // 取消之前高亮的图形
              barRecentE.dispatchAction({
                type: "downplay",
                seriesIndex: 0,
                dataIndex: barRecentE.currentIndex,
              });
              barRecentE.currentIndex = (barRecentE.currentIndex + 1) % dataLen;
              // 高亮当前图形
              barRecentE.dispatchAction({
                type: "highlight",
                seriesIndex: 0,
                dataIndex: barRecentE.currentIndex,
              });
            }, 1000);
            barRecentE.setOption(recentElectricityOption);
            window.addEventListener("resize", function () {
              //自适应大小, 不用的话不会自适应大小。
              barRecentE.resize();
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    };
    onMounted(async () => {
      getelectro();
    });
    onBeforeUnmount(async () => {
      //   if (setIntervalTime.value) {
      //     clearInterval(setIntervalTime.value);
      //   }
    });
    return {
      recentElectricity,
    };
  },
};
</script>
<style scoped>
.electro-charts {
  position: relative;
  /* bottom: 20px; */
  width: 95%;
  height: 100%;
}
</style>